<!--
 * Copyright 2015 The Chromium Authors. All rights reserved.  Use of this
 * source code is governed by a BSD-style license that can be found in the
 * LICENSE file.
-->
<html>
<head>
  <title>Automation Tests - Tree change</title>
</head>
<body>
  <ul id="list">
    <li tabindex="-1">One</li>
    <li tabindex="-1">Two</li>
  </ul>
  <button id="add">Add</button>
  <button id="remove">Remove</button>
  <button id="live">Live</button>

  <div tabindex="-1" id="dead_region1"></div>
  <div tabindex="-1" id="live_region" aria-live="polite"></div>
  <div tabindex="-1" id="dead_region2"></div>

<script>
  document.getElementById('add').addEventListener('click', function() {
    var li = document.createElement('li');
    li.tabIndex = -1;
    li.innerText = 'New';
    document.getElementById('list').appendChild(li);
  });
  document.getElementById('remove').addEventListener('click', function() {
    var list = document.getElementById('list');
    list.removeChild(list.lastElementChild);
  });
  document.getElementById('live').addEventListener('click', function() {
    var p1 = document.createElement('p');
    p1.innerText = 'Dead';
    document.getElementById('dead_region1').appendChild(p1);

    var p = document.createElement('p');
    p.innerText = 'Live';
    document.getElementById('live_region').appendChild(p);

    var p2 = document.createElement('p');
    p2.innerText = 'Dead';
    document.getElementById('dead_region2').appendChild(p2);
  });
</script>

</body>
</html>
